<template>
  <div id="word_cloud">
    <!-- 词云图 -->
    <!-- 确定颜色 -->
    <!-- 形状 -->
    <div ref="word_cloud" :class="{w_h:w_h==1}"></div>
  </div>
</template>

<script>
export default {
  name: 'word_cloud',
  props: {
    w_h: Number,
    word_data: Array | Object,
    size_range: Array | Object
  },
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      let that = this;
      let my_chart = that.$echarts.init(that.$refs.word_cloud);
      var maskImage = new Image();
      let option = {
        // tooltip: {
        //   show: true,
        // },
        series: [
          {
            // name: "热点分析", //数据提示窗标题
            type: 'wordCloud',
            sizeRange: that.size_range, //字体大小范围，
            rotationRange: [0, 0], //自体旋转角度
            shape: 'circle',
            // textPadding: 50,
            // rotationStep: 65,
            //字体分布的密集程度
            gridSize: 16,
            //设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词
            drawOutOfBound: false,
            left: 'center',
            top: 'center',
            width: '100%',
            height: '80%',
            right: null,
            bottom: null,
            autoSize: {
              enable: true,
              minSize: 12
            },
            textStyle: {
              normal: {
                //   文字样式
                // fontFamily: "sans-serif",
                // fontWeight: "bold",
                color: function () {
                  let colorList = [
                    '#1779ff',
                    '#bb17ff',
                    '#fd7f2c',
                    '#f4cc7c',
                    '#ea4371',
                    '#73df87',
                    '#ea4371'
                  ];
                  let color = colorList[Math.floor(Math.random() * colorList.length)];
                  return color;
                }
              },
              //   悬停上去的颜色设置
              emphasis: {
                shadowBlur: 5,
                shadowColor: '#333'
              }
            },
            data: that.word_data
          }
        ]
      };
      my_chart.setOption(option);
      let resizeFn = function () {
        my_chart.resize();
      };
      window.addEventListener('resize', resizeFn);
      this.$once('hook:beforeDestroy', () => {
        my_chart.dispose();
        my_chart = null;
        window.removeEventListener('resize', resizeFn);
      });
    }
  }
};
</script>
<style lang="less" scoped>
#word_cloud {
  > .w_h {
    height: 220px;
    width: 440px;
  }
}
</style>